<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div v-if="showTable">
    <div class="header">

      <el-row style="width: 100%; height: 95%">
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="margin-top: 20px; margin-left: 10px"
        >
          <el-form-item>
            <el-select v-model="value" clearable placeholder="省份">
              <el-option
                v-for="item in options0"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="value" clearable placeholder="城市">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="text"
              style="color: black; font-size: 22px"
              @click=""
            >筛选</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <el-container>
      <el-main>
        <el-table v-loading="loading" border :data="tableData.slice((page-1)*pagesize,page*pagesize)"
                  stripe max-height="700" style="width: 100%">
          <el-table-column :index="indexMethod" type="index" label="序号" width="100" ></el-table-column>
          <el-table-column prop="zzdw" label="制造/施工单位" width="300">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                {{ scope.row.zzdw }}
                <div slot="reference" class="name-wrapper">
                  <el-button  type="text"  style="text-decoration: underline; color: #606266"
                              @click="gotoDetail(scope.row.zzdw)"  >{{ scope.row.zzdw }}
                  </el-button>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="xkz" label="许可证"></el-table-column>
          <el-table-column prop="dwdz" label="单位地址" ></el-table-column>
          <el-table-column prop="lxdh" label="联系电话" ></el-table-column>
          <el-table-column prop="sbsl" label="制造/安装台数"></el-table-column>
          <el-table-column prop="wgzz" label="外国制造" ></el-table-column>
        </el-table>
      </el-main>
      <el-footer style="display: flex;
    flex-direction: row;
    justify-content: flex-end;">
        <el-pagination
          background
          @size-change="pageSizeChange"
          @current-change="pageChange"
          :current-page="page"
          :page-sizes="[10, 15, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-footer>
    </el-container>
    </div>
    <div v-if="showDetail" style="width: 100%;height: 100%;">
      <detail v-bind:zzdw="zzdw" style="height: 100%"></detail>
    </div>
  </el-card>

</template>
<script>

import Breadcrumb from '../../BreadCrumb/BreadCrumb.vue'
import detail from "./detail";
import zzdwList from '../../../../../assets/zzdwList.json'
export default {
  name: 'zzdw',
  data() {
    return {
      //args: new DataCloudSearchArgs(),
      // tableData: [],
      zzdw:'',
      showTable: true,
      showDetail: false,
      total:'',
      page: 1,
      pagesize:10,
      naviBasicItems: [{ text: '电站锅炉' },  { text: '云服制造',to:'/guolu/dataCloudService/zzdw/list'}],
      naviItems: [],
      loading: false,
      tableData: []
    }
  },
  components: {
    Breadcrumb,
    detail
  },
  async created() {
    // (this.args.SydwName = null),
    //   (this.args.GasId = null),
    //   (this.args.offset = 0),
    //   (this.args.num = 10),
    (this.naviItems = [...this.naviBasicItems])
    this.showTable = true
    this.showDetail = false
    this.tableData=zzdwList
    this.total=this.tableData.length

  },
  methods: {
    indexMethod(index){
      return (this.page-1)*this.pagesize+index+1
    },
    gotoDetail(zzdw) {
      this.zzdw=zzdw;
      this.showTable=false;
      this.showDetail=true
    },
    // 向后端发请求获得数据
    // async searchData() {
    //   this.loading = true
    //   const res = await searchReocrdDataList()
    //   this.loading = false
    //   // console.log(res)
    //   const { list, total } = res.data
    //   this.total = total
    //   this.tableData = list
    // },
    // 页面大小改变
    async pageSizeChange(pageSize) {
      // this.args.num = pageSize
      // this.args.offset = 0
      // console.log("!"+pageSize+'#')
     // this.searchData()
      this.pagesize=pageSize
    },
    // 页数改变
    async pageChange(page) {
      this.page=page
      // this.args.offset = (page - 1) * this.args.num
      // this.currentPage = page
      // console.log("#"+page+'#')
      //this.searchData()
    },
  },
}
</script>
<style lang="less" scoped>
div.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  div.search {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.btns {
    width: 100%;
    // height: 200px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    div.input {
      padding: 5px;
    }
  }
  div.table {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    div.container {
      width: 95.5%;
      position: relative;
      left: -15px;
    }
  }
  div.page {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    right: 70px;
  }
    //iconfont的使用
  /*@font-face {*/
  /*  font-family: 'iconfont';*/
  /*  src: url('../../../../icons/iconfont/iconfont.woff2?t=1625151297720') format('woff2'),*/
  /*  url('../../../../icons/iconfont/iconfont.woff?t=1625151297720') format('woff'),*/
  /*  url('../../../../icons/iconfont/iconfont.ttf?t=1625151297720') format('truetype');*/
  /*}*/
  /*.iconfont {*/
  /*  font-family: "iconfont" !important;*/
  /*  font-size: 25px;*/
  /*  color: #0099ff;*/
  /*  font-style: normal;*/
  /*  -webkit-font-smoothing: antialiased;*/
  /*  -moz-osx-font-smoothing: grayscale;*/
  /*}*/
}
</style>
